Table of Content¶

2. Your first grid
4. Fraction units and repeat
5. Positioning Items
6. Template areas
7. Auto-fit and minmax
8. Implicit rows
9. Named Lines
10. Justify-content and align-content
11. Justify-items and align-items
12. Auto-fit vs Auto-fill
15. Grid vs Flexbox
Credits

2. Your first grid¶

Grid consist of 2 main elements: the main container, and the items inside the container. Without any layout, this results in 6 divs stack on top of each other. This is because the default behaviour is 1 column.

html

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

css

.container {
    display: grid;
}

To specify the number of columns, use grid-template-columns. Eg grid-template-columns: 100px auto 100px == means 3 columns with the second column taking up whatever space left; first and third row having 100px width.
To specify the number of rows, use grid-template-rows. Eg grid-template-rows: 50px 50px; == means 2 rows, each having 50px heights.
To have gaps in between the grids, use grid-gap. Eg grid-gap: 3px gives gaps of 3px in between all child elements.
Using auto also makes it responsive.

4. Fraction units and repeat¶

To make the grid responsive (grows in size as the browser window grows in size), use fraction units. Eg grid-template-columns: 1fr 2fr 1fr = the second column will always be twice as big as the first and third columns because they take up 1fr each.

Another way to write grid-template-columns: 1fr 1fr 1fr is using repeat; ie grid-template-columns: repeat(3, 1fr). The first argument is the amount of rows or columns, the second value is the fraction we want to specify for each of the row or column.

Short hand to write both grid-template-columns and grid-template-rows is to combine both into grid-template: rows / columns. Eg below, both of the example below give the same result.

5. Positioning Items¶

To position items across multiple columns, we use grid-column-start to specify the start position and grid-column-end to specify the end position.

We can combine both grid-column-start and grid-column-end into grid-column, using this syntax: grid-column: start position / end position.
Use span x when we don't know the exact end column number, but want the element to span across x column from start. Eg grid-column: 1 / span 3 will have the element start at column 1, and end at column 1+3=4.
Use negative index, when we don't know the exact end column number, but want to make sure that the column ends at i-th element from the last column.
Note: first column is indexed 1. Last column is indexed -1.

Example 1

Example 2

Have the grid item span multiple col and start from wherever the previous grid item ends.
Eg to span across 2 cols: grid-column: auto / span 2

Example 3

Have the grid item span multiple row and start from wherever the previous grid item ends.
Eg to span across 2 rows: grid-row: auto / span 2

$image-5.png$

Example 4

$image-6.png$

Example 5

We can fill in the blank grid item spaces using grid-auto-flow
grid-auto-flow here is an example of source order independence = the positioning of element is independent of how it is defined in html. This is huge win because we are using html only for markup and css for styling.

6. Template areas¶

Use template areas to quickly move elements around.
We first have to specify the layout using grid-template-areas. Note that, any layout element we add (eg here, h, m, c, f) must be rectangular, if we try to do irregular shapes, the layout will break. We can use any character to define a layout element.
The total number of rows in grid-template-areas must match the total number of rows we defined in grid-template-rows. And likewise, the total number of columns must match the number of columns we defined in grid-template-columns.
We then assign the defined layout to grid children using grid-area.
. in grid-template-areas denotes blank space.

7. Auto-fit and minmax¶

To make the grid items vary dynamically with the size of the container ==> for responsive. Because we'd want eg only 2 columns when viewed on mobile and 6 when viewed on desktop, but each of the grid item, we want it to be of fixed size.

auto-fit lets us make as much column/row as we can to fit in the window. Both of the examples (left and right) below have the same css code, only different window width.

Example for `grid-template-columns: repeat(auto-fit, 100px)`

But, using auto-fit is not responsive enough because we could end up with the situation below where, we have awkward empty space that is big enough to notice, but less than 100px.

As a workaround to the above problem, we use minmax. minmax(100px, 1fr) would make the columns be at least 100px wide, and when there are extra space, it would distribute across all cols evenly.

8. Implicit rows¶

When we did not explicitly define the height of rows, they will only take up as much space as they need. See example below.

To make sure our grid is responsive (as we resize the window, columns can move up and down) while still keeping specific heights on (dynamically) remaining rows, we can implicitly set row height using grid-auto-rows.

$image-2.png$

9. Named Lines¶

We can name the lines that divides our rows and columns.
For example: grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end]; means we have 2 columns:
- The first line is named main-start
- Then we have a column of width 1fr
- The middle line is named content-start
- Then we have a column of width 5fr
- Lastly the last line is named main-end.
We can then use the named lines to specify where we want to place the content in. Eg for header, we want to place in between main-start to main-end line, we write grid-column: main-start / main-end. Since both of the lines are main-x lines, we can simplify this as grid-column: main.
When we have all perimeter of an area having the same name, eg for our content element below, it is enclosed by (clock-wise) content-start (row) -> content-end (col) -> content-end (row) -> content-start (col). So we can simplify this as the grid-area: content.

10. Justify-content and align-content¶

To align grid items across row, use justify-content.
To align grid items across column, use align-content.

11. Justify-items and align-items¶

Differences between (justify-items / align-items) vs (justify-content / align-content):
- x-content: Use this to move grid child around the grid container.
- x-items: Use this to move the content within each child item around.
To target a specific grid child element and position its content relative to itself, use:
- justify-self: Move across row
- align-self: Move across col

Reference: https://blog.bitsrc.io/mastering-css-properties-a-deep-dive-into-align-content-justify-content-align-items-and-342c47858ea8

Example 1: Using justify-self and align-self</strong>

Here we use x-self to only target 1 child element, and use it to position itself relative to itself (a grid child)

12. Auto-fit vs Auto-fill¶

Main differences between auto-fit vs auto-fill:
- Auto-fit: make sure the elements fit within the grid.
- Auto-fill: when there is space for new col, will make new col.
Under the hood, both auto-fit and auto-fill make new col when there is space, but auto-fit makes the extra col width=0, but auto-fill doesn't.

15. Grid vs Flexbox¶

Flexbox:
- Great for 1 dimensional layout (ie 1 row, or 1 column)
- Content-first = positioning is based on HTML markup
Grid:
- Great for 2 dimensional layout (ie a table)
- Layout-first = positioning is based on CSS styling

Example 1: Grid vs Flex

$image.png$

Example 2: Combining Flex into Grid

$image.png$

Credits¶

The course: https://v1.scrimba.com/learn/cssgrid
Grid by Example: https://gridbyexample.com/